@mixin linear-gradient($top-color, $bottom-color){
background: -moz-linear-gradient(top,  $top-color 0%, $bottom-color ); /* FF3.6+ */
background: -webkit-linear-gradient(top,  $top-color 0%,$bottom-color ); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top,  $top-color 0%,$bottom-color ); /* IE10+ */
}

html, body, div, header, h1, h2, p, ul, li, a, p, section, article, footer{
	margin: 0;
	padding: 0;
}
 
body { 
	font-family: Verdana, sans-serif;
	font-size: 14px;   
    @include linear-gradient(#ebff5b,#444444);  
	  
	 #backgroundContainer{ 
	 background: url("..\\images\\3.png") top right no-repeat, url("..\\images\\4.png") top left no-repeat; 
	 }
}
 
 #wrapper {
	width: 960px;
	margin: 0 auto;
	
		/** Navigation **/
	#nav{
		width: 100%;
		height: 120px;
		background: rgba(0,0,0,0.7); 
		 	 		 		 
		img{
			width: 480px;
			height: 80px;
			margin-left: 26%;
		}
		 
		ul li{
			width: 100%;
			background-color: #459E00;  
			line-height: 30px;
			width: 110px;
			text-align: center;
			display: inline-block;
			overflow: hidden;
			margin-top: 6px;
			margin-right: 1%; 
			padding: 2px;

			a{
				display: block; 
				text-decoration: none; 
				font-size: 1.2em;
				color: #fff;	
							
				&:hover{
				background-color: #FAFAF4; 
				color: #459E00;
				}		
			}
		}
	}

	/**Content**/
	#content{
		margin-top: 20px;
		width: 96%;
		padding: 2%;
		overflow: hidden;
		background-color: rgba(255,255,255,0.5);  
		border: 1px solid #666;
		border-radius: 10px 10px 0 0 ;
		overflow: hidden;
		min-height: 300px;
		 
		li{
			margin-left: 20px;
		}
		h2{
			margin-bottom: 10px;
			text-align: center;
		}

		#visualization{
			height: 600px;
		}

		.arcade{
			width: 180px; 
			heigh: 250px;
			background-color: red;
		}
	}

	/**Footer**/
	footer{  
		height: 30px;
		padding-top: 20px;
		background-color: rgba(0,0,0,0.7); 
 		color: #fff;
		p {
			text-align: center;
		}
	}
}

